<template>
  <div class="app-container">
    <div class="tabs-box">
      <div class="l-box">
        <div class="title-head">
          成员分类
        </div>
        <div class="memberList">
          <div :class="item.check ? 'item check' : 'item'" v-for="(item, index) in memberList" :key="index" @click="handleMember(item)">
            {{ item.label }} ({{ item.num }})
          </div>
        </div>
      </div>
      <div class="r-box">
        <div class="operation">
          <el-button type="primary" icon="el-icon-plus" @click="handleAddMember">添加成员</el-button>
          <div class="right">
            <el-input
              class="input"
              placeholder="查找用户名"
              prefix-icon="el-icon-search"
              @blur="handleQuery"
              v-model="queryInput">
            </el-input>
            <el-button type="primary" style="margin-right: 20px" @click="handleAuthority">项目权限配置</el-button>
            <el-dropdown @command="handleCommand">
              <div class="el-dropdown-link">
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">批量导出</el-dropdown-item>
                <el-dropdown-item command="2">批量删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <el-table
          v-loading="loading"
          height="400"
          :header-cell-style="{
              'background-color': '#F9F9F9'
            }"
          :data="configList"
          @selection-change="handleSelectionChange"
          border
          :row-class-name="tableClass">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="用户名" align="left" prop="userName" sortable>
            <template slot-scope="scope">
                <span v-if="scope.row.nickName">
                  <span class="icon-name red">{{ scope.row.nickName[scope.row.nickName.length - 1] }}</span>
                  <span>{{ scope.row.nickName }}</span>
                </span>
            </template>
          </el-table-column>
          <el-table-column label="角色" align="center" prop="roleName" />
          <el-table-column label="成员分类" align="center" prop="postName" />
          <el-table-column label="账号" align="center" prop="userName" />
          <el-table-column label="权限" align="center" prop="dataScope">
            <template slot-scope="scope">
                <span v-if="scope.row.dataScope == 1">全部</span>
              <span v-else>自定义</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" header-align="left" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-popconfirm
                title="确定删除吗？"
                @confirm="handleDelete(scope.row, 'single')"
              >
                <el-button
                  size="mini"
                  slot="reference"
                >删除</el-button>
              </el-popconfirm>
<!--              <el-button-->
<!--                size="mini"-->
<!--                style="margin-left: 15px"-->
<!--                @click="handleUpdate(scope.row)"-->
<!--              >修改</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <project-authority ref="authority" />
    <addUser ref="add" @upDate="getList" />
  </div>
</template>

<script>
import {countUserByPmId, deleteUser, list, userBypostId, userListByPostId} from "@/api/projectManage/membership";
import ProjectAuthority from "@/views/projectManage/membership/projectAuthority";
import {mixin} from "../mixin";
import {postUserCount} from "@/api/projectManage/membership";
import addUser from './addUser'

export default {
  name: "Config",
  components: {ProjectAuthority, addUser},
  mixins: [mixin],
  data() {
    return {
      memberList: [],
      userPostVos: [],
      isMember: {},
      configList: [],
      loading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      activeName: null,
      queryInput: '',
    }
  },
  mounted() {
    this.getPostUserCount()
  },
  methods: {
    // 请求列表
    getList() {
      this.configList = []
      const params = {
        postId: this.isMember.id,
        cProNo: this.projectInfo.cProNo
      }
      this.loading = true
      userListByPostId(params).then(res => {
        this.configList = res || []
      }).finally(() => this.loading = false)
    },
    // 获取人员分类
    getPostUserCount() {
      countUserByPmId({
        cProNo: this.projectInfo.cProNo
      }).then(res => {
        this.userPostVos = res.userPostVos
        res.userPostCounts.forEach((i, z) => {
          if (i && i.postName) {
            this.memberList.push(
              {
                id: i.postId,
                label: i.postName,
                num: i.count,
                check: z === 0 // 默认第一项选中
              },
            )
          }
        })
        this.isMember = this.memberList[0]
        this.getList()
      })
    },
    // 项目权限配置
    handleAuthority() {
      this.$refs.authority.open()
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 分页
    currentChang(val) {
      this.queryParams.pageNum = val.page
      this.queryParams.pageSize = val.limit
      this.getList()
    },
    // 选择成员分类
    handleMember(item) {
      this.isMember = item
      this.memberList.forEach(k => {
        k.label === item.label ? k.check = true : k.check = false
      })
      this.getList()
    },
    // 修改
    handleUpdate(row) {
      this.$refs.add.open(row)
    },
    // 删除
    handleDelete(row, type) {
      let userIds = ''
      if (type === 'single') {
        userIds = row.userId
      } else {
        const list = []
        row.forEach(i => list.push(i.userId))
        userIds = list.join(',')
      }
      deleteUser().then(res => {
        this.$notify({title: '成功', message: '删除成功！', type: 'success',});
        this.getList()
      }).catch(() =>  this.$notify({title: '警告', message: '删除失败！', type: 'warning'}))
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection)
    },
    // 选择项目
    commandProject(command) {
      console.log(command)
    },
    // 更多操作
    handleCommand(command) {
      console.log(command)
      if (command === '2') {
        this.selectTable.length ?
          this.handleDelete(this.selectTable) :
          this.$notify({title: '警告', message: '请勾选要删除的项目！', type: 'warning'})
      }
    },
    // 添加成员
    handleAddMember() {
      this.$refs.add.open()
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/projectManage";
::v-deep .workInput {
  width: 80%;
  .el-input__inner {
    text-align: center;
    border-radius: 20px;
    background: #dedede40;
  }
}
.tabs-box {
  padding: 10px 0 0 10px;
  display: flex;
  .l-box {
    width: 12%;
  }
  .r-box {
    width: 88%;
  }
}
.memberList {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 150px;
  .item {
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding-left: 15px;
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    margin-top: 20px;
    cursor: pointer;
    color: #333333;
  }
  .check {
    border-radius: 4px;
    color: #C50405;
    background: rgba(255, 213, 210, 0.5);
  }
}
</style>
